<template>
	<div class="bbig">
	<div class="mb16">
				<button class="gjsx" @click="showClick">高级筛选 <img src="../img/高级筛选.png" style="height: 15px;"/></button>
				<div class="ml1">
					<el-input type="text" maxlength="20" placeholder="输入项目名称/房号/费用编号" class="el-input"/>
					<el-button type="primary"  style="height: 40px; background-color: white;color: black; border: none; margin-top: 16px;">搜索</el-button>
				</div>
			</div>

	
	
	<div class="tongjikk">
		<div class="div-1">总交易金额(元)<br><span>XXX</span></div>
		<div class="div-2">其他收支(元)<br><span>XXX</span></div>
		<div class="div-3">预存(元)<br><span>XXX</span></div>
		<div class="div-4">费用金额(元)<br><span>XXX</span></div>
	</div>
	
	<div class="bksj">
		<div class="shuju">
			<el-descriptions title="User Info">
				<el-descriptions-item label="交易">
				  <el-tag size="small">什么交易</el-tag>
				</el-descriptions-item>
			    <el-descriptions-item label="单号">kooriookami</el-descriptions-item>
			    <el-descriptions-item label="操作人">18100000000</el-descriptions-item>
			    <el-descriptions-item label="交易生成时间">Suzhou</el-descriptions-item>
				<el-descriptions-item label="">Suzhou</el-descriptions-item>
			    <el-descriptions-item label="交易金额">
					xxx
			    </el-descriptions-item>
			    <el-descriptions-item label="支付方式">
			    </el-descriptions-item>
				<el-descriptions-item label="">
					详情
				</el-descriptions-item>
			  </el-descriptions>
		</div>
	</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	

</script>

<style>
	.bbig{
		background-color: white;
	}
	.tongjikk{
		border: 2px solid gainsboro;
		width: 1400px;
		height: 100px;
		background-color: white;
		border-radius: 10px;
	}
	
	.div-1{
		border: 1px solid gainsboro;
		width: 240px;
		height: 60px;
		margin-top: 18px;
		margin-left: 56px;
		float: left;
		border-radius: 10px;
	}
	.div-2{
		border: 1px solid gainsboro;
		width: 240px;
		height: 60px;
		margin-top: 18px;
		margin-left: 450px;
		float: left;
		border-radius: 10px;
	}
	
	.div-3{
		border: 1px solid gainsboro;
		width: 240px;
		height: 60px;
		margin-top: 18px;
		margin-left: 120px;
		float: left;
		border-radius: 10px;
	}
	.div-4{
		border: 1px solid gainsboro;
		width: 240px;
		height: 60px;
		margin-top: -60px;
		margin-left: 400px;
		float: left;
		border-radius: 10px;
		
		
	}
	
	.bksj{
		border: 2px solid gainsboro;
		border-radius: 10px;
		width: 1400px;
		margin-top: 56px;
	}
	
	.shuju{
		border: 1px solid gainsboro;
		width: 1280px;
		height: 160px;
		margin-left: 35px;
		margin-top: 20px;
		padding-left: 50px;
		border-radius: 10px;
	}
	
	
	
	
	
	.mb16{
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
		width: 1315px;
	}
	
	.gjsx{
			background-color: white;
			padding: 10px 15px;
			color: #00C36D;
			width: 146px;
			height: 40px;
			font-size: 18px;
		}
		
		.ml1{
			width: 300px;
			border: none;
			margin-left: 10px;
			display: inline-table;
			margin-top: -10px;
		}

			.el-input{
				width: 240px;
				margin-top: 16px;
			}
	
</style>